<template>
  <el-drawer destroy-on-close
             :visible.sync="visible"
             :wrapper-closable="true"
             :size="drawerSize">
    <template slot="title">
      <div style="font-size:18px;color:var(--prev-color-text-primary);">
        {{title}}
      </div>
    </template>
    <component :is="component.name"
               ref="component"
               :disabled="disabled"
               v-bind="component"
               @cancel="handleCancel"
               @confirm="handleConfirm" />
  </el-drawer>
</template>
<script>
import { DrawerRegistrar } from "@tablra"
import ResetUserPassword from "./ResetUserPassword.vue"
import ShippingAddressDefaults from "./ShippingAddressDefaults.vue"
import ConsigneeDurationSet from "./ConsigneeDurationSet.vue"
import SetConsignee from "./SetConsignee.vue"
import PickCoenantDrawer from "./PickCoenantDrawer.vue"

export default {
  name: "TableDrawerSet",
  components: {
    ResetUserPassword,
    ShippingAddressDefaults,
    ConsigneeDurationSet,
    SetConsignee,
    PickCoenantDrawer
  },
  data () {
    return {
      visible: false,
      disabled: false,
      component: {},
    };
  },
  computed: {
    title () {
      return this.component?.title;
    },
    drawerSize () {
      return this.component?.drawerSize;
    }
  },
  created () {
    DrawerRegistrar.register(this);
  },
  methods: {
    mount (component) {
      this.component = component;
      this.visible = !this.visible;
    },
    handleCancel () {
      this.visible = false;
    },
    handleConfirm () {
      this.visible = false;
      this.$emit("refresh");
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 28px;
}
::v-deep .el-drawer__header {
  margin-bottom: 20px;
  margin-top: 0px;
}
</style>
